<template>
  <div class="game-hall" ref="gameHallWrapper">
    <div class="scroll">
      <div class="header-background">
        <img width="100%" height="100%" :src="detailGames.img">
      </div>
      <div class="message-box">
        <div class="header-message">
          <div class="img">
            <img width="100%" height="100%" :src="detailGames.icon">
          </div>
          <h1 class="title">{{parentData.name}}</h1>
          <span class="message-font">{{parentData.title}}</span>
          <a class="start-game" href="javascript:;" @click="startGame(parentData.url)">开始游戏</a>
        </div>
      </div>
      <split></split>
      <div class="game-introduce-wrapper" v-if="detailGames.sub_title">
        <div class="game-introduce">
          <v-title text="游戏介绍"></v-title>
          <p class="message-font">
            <span class="message-hook">{{detailGames.sub_title | intercept}}</span>
          </p>
        </div>
        <split></split>
      </div>
      <div class="game-message-wrapper" v-if="detailGames.provide_name">
        <div class="game-message">
          <v-title text="游戏信息"></v-title>
          <div class="content">
            <p class="message-font">发行商：{{detailGames.provide_name}}</p>
          </div>
        </div>
        <split></split>
      </div>
      <div class="game-gift-wrapper" v-if="detailGifts.length > 0">
        <div class="game-gift">
          <v-title text="游戏礼包"></v-title>
          <ul>
            <li class="gift-list border-1px" v-for="(item,$index) in detailGifts" :key="$index">
              <h1 class="title" v-if="item.newTitle">{{item.newTitle}}</h1>
              <h1 class="title" v-else>{{item.title}}</h1>
              <p class="opera" v-if="item.opera">{{item.opera}}</p>
              <p class="message-font">{{item.sub_title}}</p>
              <span class="btn-green" @click="receiveGift(item.code, item.code_id, item.id)" v-if="!item.if">领取</span>
              <span class="btn-green" @click="receiveGift(item.code, item.code_id, item.id)" v-else>查看</span>
            </li>
          </ul>
          <div class="bottom-btn">
          <span v-if="!noMoreGifts&&!giftLittle && detailGifts.length > 0" class="btn-b-grey"
                @click="showMore('gifts')">查看更多</span>
            <span v-else-if="!noMoreGifts&&giftLittle && detailGifts.length > 0" class="btn-b-grey"
                  @click="showMore('gifts')">收起</span>
            <span v-if="noMoreGifts" class="btn-b-grey">没有更多了</span>
          </div>
        </div>
        <split></split>
      </div>
      <div class="game-group-wrapper" v-if="gameGroup">
        <div class="game-group">
          <v-title text="游戏圈"></v-title>
          <p class="message-font">QQ群：{{gameGroup}}</p>
        </div>
        <split></split>
      </div>
      <div class="game-notice-wrapper" v-if="!noMoreNotice">
        <div class="game-notice">
          <v-title text="公告"></v-title>
          <noticelist :load-url="loadUrl"></noticelist>
        </div>
      </div>
    </div>
    <messagebox :gift-code="giftCode" v-if="showMessageBox"></messagebox>
    <loading-full :no-loading="noLoading"></loading-full>
    <back></back>
  </div>
</template>

<script type="text/ecmascript-6">
  import split from '../../../common/split/split'
  import VTitle from '../../../common/title/title'
  import noticelist from '../../../common/noticelist/noticelist'
  import messagebox from '../../../common/messagebox/messagebox'
  import back from '../../../common/back/back'
  import BScroll from 'better-scroll'
  import {splitTitle, startGame} from '../../../../assets/js/common'
  import LoadingFull from '../../../common/loading-full/loading-full'

  export default {
    data() {
      return {
        allText: false,
        showMessageBox: false,
        noMoreGifts: false,
        giftLittle: false,
        noMoreNotice: false,
        noLoading: false,
        detailGames: [],
        allGifts: [],
        littleGifts: [],
        detailGifts: [],
        parentData: [],
        gameGroup: '',
        giftCode: '',
        loadUrl: '',
        giftTitle: '',
        opera: ''
      }
    },
    methods: {
      getDetail() {
        //获取游戏详情
        this.$http.get(`/game/index.php?m=Home&c=Api&a=getGameInfo&game_id=${this.parentData.id}`).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.detailGames = response.data.data[0]
          }
        })

        //获取礼物详情
        this.$http.get(`/game/index.php?m=Home&c=Api&a=getGameGifts&game_id=${this.parentData.id}`).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.detailGifts = response.data.data
            for (let i = 0; i < this.detailGifts.length; i++) {
              let title = this.detailGifts[i].title
              let splitData = splitTitle(title)
              this.detailGifts[i]['newTitle'] = splitData.newTitle
              this.detailGifts[i]['opera'] = splitData.opera
            }
            this.allGifts = this.detailGifts
            this.littleGifts = this.detailGifts.slice(0, 3)
            this.detailGifts = this.littleGifts
            if (this.allGifts.length < 3) {
              this.noMoreGifts = true
            }
            this.Indicator.close()
          }
        })

        //获取游戏公会
        this.$http.get(`/game/index.php?m=Home&c=Api&a=getGameGroup&game_id=${this.parentData.id}`).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            let group = {old: response.data.data, new: []}
            for (let i = 0; i < group.old.length; i++) {
              group.new.push(group.old[i].group)
            }
            for (let i = 0; i < group.new.length; i++) {
              this.gameGroup += `${group.new[i]} `
            }
          }
        })
        // 获取游戏公告
        this.loadUrl = `/game/index.php?m=Home&c=Api&a=getGameNotices&game_id=${this.parentData.id}`
      },
      receiveGift(code, codeId, giftId) {
        //判断兑换码是否被使用
        this.$http.get(`/game/index.php?m=Home&c=Api&a=judgeCode&code_id=${codeId}&gift_id=${giftId}`).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            if (response.data.data.type !== 2) {
              this.giftCode = code
            }
            this.showMessageBox = true
          } else {
            this.MessageBox('提示', '服务器繁忙请稍后再试！')
          }
        })
      },
      showMore(type) {
        if (type === 'gifts') {
          if (this.giftLittle) {
            this.detailGifts = this.littleGifts
            this.giftLittle = false
          } else {
            this.giftLittle = true
            this.detailGifts = this.allGifts
          }
        }
      },
      startGame
    },
    filters: {
      intercept(value) {
        if (value && value.length > 90) {
          return `${value.substring(0, 90)}...`
        }
        return value
      }
    },
    created() {
      this.parentData = this.$route.query
      this.getDetail()
      this.$nextTick(() => {
        if (!this.gameHallScroll) {
          this.gameHallScroll = new BScroll(this.$refs.gameHallWrapper, {
            click: true
          })
        } else {
          this.gameHallScroll.refresh()
        }
      })
    },
    mounted() {
      this.eventBus.$on('copyOk', (status) => {
        this.showMessageBox = status
      })

      this.eventBus.$on('noMoreNotice', (status) => {
        this.noMoreNotice = status
      })
    },
    components: {
      LoadingFull, split, VTitle, noticelist, messagebox, back
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../../assets/stylus/main.styl"
  @import "../../../../assets/stylus/mixin.styl"
  .game-hall
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background #f5f5fa
    overflow hidden
    z-index 9
    .header-background
      width 100%
      height 380px
      background #fff
      img
        border-radius 0px
    .message-box
      width 100%
      height 260px
      background #fff
      .header-message
        position absolute
        top 318px
        width 100%
        text-align center
      .img
        width 112px
        height 112px
        margin-left auto
        margin-right auto
        border-radius 30px
        border 6px solid rgba(255, 255, 255, .5)
      .title
        margin-top 7px
        font-size 32px
        color #333
      .message-font
        display block
        margin-top 15px
        padding 5px 32px
        width 100%
        height 30px
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        box-sizing border-box
      .start-game
        display block
        width 340px
        height 76px
        margin 15px auto 32px auto
        text-align center
        font-size 32px
        line-height 76px
        background #2ECC40
        color #fff
        border-radius 10px
        &:hover
          background grey
    .game-introduce, .game-message, .game-gift, .game-notice, .game-group
      padding 32px
      background #fff
      .message-font
        display inline-block
        margin-top 24px
        line-height 32px
        .all-text
          display inline-block
          color #2ECC40
    .game-message
      .message-font
        line-height 10px
    .game-gift
      .gift-list
        position relative
        border-1px(rgba(0, 0, 0, .2))
        &:last-child
          border-none()
        .title
          margin-top 24px
        .opera
          margin-top 8px
          font-size 24px
          color #666
        .message-font
          margin 16px 0
          width 550px
        .btn-green
          top 0
    .game-group
      .group-list
        position relative
        padding 24px 0
        border-1px(rgba(0, 0, 0, .2))
        &:last-child
          border-none()
          padding-bottom 0
        .left
          display inline-flex
          align-items center
          .title
            margin-left 15px
</style>
